<template>
  <div class="hotel" @click="to('/pages-sub/hotel/detail/index')">
    <image class="img" :src="item.img" />
    <div class="info">
      <Reference :list="item.ysj" />
      <div class="title">{{ item.title }}</div>
      <div class="price-scoped">
        <div class="price">198</div>
        <div class="specs">1室·2人</div>
        <div class="star">
          <wd-icon name="star-on" size="22rpx" color="#FFAA00" />
          4.8
        </div>
      </div>
      <div class="original-price" v-if="item.originalPrice">￥{{ item.originalPrice }}</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { to } from '@/utils/page'
defineOptions({ name: 'HotelItem' })

const props = defineProps(['hotel'])
const item = props.hotel
</script>
<style lang="scss" scoped>
.hotel {
  // margin-bottom: 26rpx;
  overflow: hidden;
  font-size: 0;
  background-color: #fff;
  border-radius: 30rpx;
  .img {
    width: 100%;
    height: 250rpx;
    border-radius: 30rpx 30rpx 0 0;
  }
  .info {
    padding: 20rpx 16rpx 16rpx;
    font-size: 0;
    .title {
      margin-top: 19rpx;
      font-size: 26rpx;
      line-height: 32rpx;
      color: var(--color1);
      @include text-clamp(1);
    }
    .price-scoped {
      display: flex;
      align-items: center;
      height: 38rpx;
      margin-top: 8rpx;
      .price {
        font-size: 30rpx;
        font-weight: 600;
        color: var(--color1);
        &::before {
          display: inline-block;
          font-size: 22rpx;
          content: '￥';
        }
      }
      .specs {
        flex: 1;
        margin-left: 12px;
        font-size: 23rpx;
        color: var(--color4);
      }
      .star {
        font-size: 23rpx;
        color: var(--color1);
      }
    }
    .original-price {
      margin-top: 8rpx;
      font-size: 23rpx;
      line-height: 38rpx;
      color: var(--color4);
      text-decoration: line-through;
    }
  }
}
</style>
